{
  "cells": [
    {
      "cell_type": "markdown",
      "metadata": {
        "id": "Tce3stUlHN0L"
      },
      "source": [
        "##### Copyright 2025 Google LLC."
      ]
    },
    {
      "cell_type": "code",
      "execution_count": 1,
      "metadata": {
        "cellView": "form",
        "id": "tuOe1ymfHZPu"
      },
      "outputs": [],
      "source": [
        "# @title Licensed under the Apache License, Version 2.0 (the \"License\");\n",
        "# you may not use this file except in compliance with the License.\n",
        "# You may obtain a copy of the License at\n",
        "#\n",
        "# https://www.apache.org/licenses/LICENSE-2.0\n",
        "#\n",
        "# Unless required by applicable law or agreed to in writing, software\n",
        "# distributed under the License is distributed on an \"AS IS\" BASIS,\n",
        "# WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n",
        "# See the License for the specific language governing permissions and\n",
        "# limitations under the License."
      ]
    },
    {
      "cell_type": "markdown",
      "metadata": {
        "id": "7EtZRebrTCzD"
      },
      "source": [
        "# Opossum search\n",
        "\n",
        "<a target=\"_blank\" href=\"https://colab.research.google.com/github/google-gemini/cookbook/blob/main/examples/Opossum_search.ipynb\"><img src=\"https://colab.research.google.com/assets/colab-badge.svg\" height=30/></a>"
      ]
    },
    {
      "cell_type": "markdown",
      "metadata": {
        "id": "mZsD3pqETKMV"
      },
      "source": [
        "This notebook contains a simple example of generating code with the Gemini API and Gemini Flash. Just for fun, you'll prompt the model to create a web app called \"Opossum Search\" that searches Google with \"opossum\" appended to the query."
      ]
    },
    {
      "cell_type": "markdown",
      "metadata": {
        "id": "5kHESAVZcZQD"
      },
      "source": [
        "<img src=\"https://storage.googleapis.com/generativeai-downloads/images/opossum_search.jpg\" alt=\"An image of the opossum search web app running in a browser\" width=\"500\"/>\n",
        "\n",
        "> The opossum image above is from [Wikimedia Commons](https://commons.wikimedia.org/wiki/File:Opossum_2.jpg), and shared under a CC BY-SA 2.5 license."
      ]
    },
    {
      "cell_type": "code",
      "execution_count": 2,
      "metadata": {
        "id": "UyZKDjRs-FN5"
      },
      "outputs": [],
      "source": [
        "%pip install -q -U \"google-genai>=1.0.0\""
      ]
    },
    {
      "cell_type": "markdown",
      "metadata": {
        "id": "Dm7FFjBscek6"
      },
      "source": [
        "## Set up your API key\n",
        "\n",
        "To run the following cell, your API key must be stored it in a Colab Secret named `GOOGLE_API_KEY`. If you don't already have an API key, or you're not sure how to create a Colab Secret, see the [Authentication ![image](https://storage.googleapis.com/generativeai-downloads/images/colab_icon16.png)](../quickstarts/Authentication.ipynb) quickstart for an example."
      ]
    },
    {
      "cell_type": "code",
      "execution_count": 3,
      "metadata": {
        "id": "IciW45ex-Lo9"
      },
      "outputs": [],
      "source": [
        "from google import genai\n",
        "from google.genai.types import GenerateContentConfig\n",
        "from google.colab import userdata\n",
        "\n",
        "GOOGLE_API_KEY=userdata.get('GOOGLE_API_KEY')\n",
        "client = genai.Client(api_key=GOOGLE_API_KEY)"
      ]
    },
    {
      "cell_type": "markdown",
      "metadata": {
        "id": "4V68II0ZeCjz"
      },
      "source": [
        "Prompt the model to generate the web app."
      ]
    },
    {
      "cell_type": "code",
      "execution_count": 4,
      "metadata": {
        "id": "mxYn5lUAfsUC"
      },
      "outputs": [],
      "source": [
        "instruction = \"\"\"\n",
        "    You are a coding expert that specializes in creating web pages based on a user request.\n",
        "    You create correct and simple code that is easy to understand.\n",
        "    You implement all the functionality requested by the user.\n",
        "    You ensure your code works properly, and you follow best practices for HTML programming.\n",
        "\"\"\""
      ]
    },
    {
      "cell_type": "code",
      "execution_count": 5,
      "metadata": {
        "id": "igrg_SxPfwQ6"
      },
      "outputs": [],
      "source": [
        "prompt = \"\"\"\n",
        "    Create a web app called Opossum Search:\n",
        "    1. Every time you make a search query, it should redirect you to a Google search\n",
        "    with the same query, but with the word opossum before it.\n",
        "    2. It should be visually similar to Google search.\n",
        "    3. Instead of the google logo, it should have a picture of this opossum:\n",
        "    https://upload.wikimedia.org/wikipedia/commons/thumb/2/27/Opossum_2.jpg/292px-Opossum_2.jpg.\n",
        "    4. It should be a single HTML file, with no separate JS or CSS files.\n",
        "    5. It should say Powered by opossum search in the footer.\n",
        "    6. Do not use any unicode characters.\n",
        "    Thank you!\n",
        "\"\"\""
      ]
    },
    {
      "cell_type": "code",
      "execution_count": 6,
      "metadata": {
        "id": "-qpqkgTurqYI"
      },
      "outputs": [],
      "source": [
        "from IPython.display import display, Markdown\n",
        "MODEL_ID = \"gemini-2.5-flash\" # @param [\"gemini-2.5-flash-lite\", \"gemini-2.5-flash\", \"gemini-2.5-pro\",\"gemini-3-pro-preview\"] {\"allow-input\":true, isTemplate: true}"
      ]
    },
    {
      "cell_type": "code",
      "execution_count": 7,
      "metadata": {
        "id": "VTrmQCs0CQfM"
      },
      "outputs": [
        {
          "data": {
            "text/markdown": [
              "Here is the HTML code for your Opossum Search web application:\n",
              "\n",
              "```html\n",
              "    <!DOCTYPE html>\n",
              "    <html>\n",
              "    <head>\n",
              "    <title>Opossum Search</title>\n",
              "    <style>\n",
              "    body {\n",
              "    font-family: Arial, sans-serif;\n",
              "    margin: 0;\n",
              "    display: flex;\n",
              "    flex-direction: column;\n",
              "    align-items: center;\n",
              "    height: 100vh;\n",
              "    }\n",
              "    .container {\n",
              "    text-align: center;\n",
              "    margin-top: 10vh;\n",
              "    }\n",
              "    img {\n",
              "    width: 200px;\n",
              "    margin-bottom: 20px;\n",
              "    }\n",
              "    input[type=text] {\n",
              "    padding: 10px 20px;\n",
              "    width: 500px;\n",
              "    border: 1px solid #ccc;\n",
              "    border-radius: 24px;\n",
              "    font-size: 16px;\n",
              "    }\n",
              "    button {\n",
              "    padding: 10px 20px;\n",
              "    background-color: #f8f9fa;\n",
              "    border: 1px solid #f0f0f1;\n",
              "    color: #3c4043;\n",
              "    border-radius: 4px;\n",
              "    cursor: pointer;\n",
              "    margin: 5px;\n",
              "    }\n",
              "    button:hover {\n",
              "    border: 1px solid #ccc;\n",
              "    }\n",
              "    footer {\n",
              "    margin-top: auto;\n",
              "    text-align: center;\n",
              "    padding: 20px;\n",
              "    font-size: small;\n",
              "    color: #70757a;\n",
              "    }\n",
              "    </style>\n",
              "    </head>\n",
              "    <body>\n",
              "    <div class=\"container\">\n",
              "    <img src=\"https://upload.wikimedia.org/wikipedia/commons/thumb/2/27/Opossum_2.jpg/292px-Opossum_2.jpg\" alt=\"Opossum Logo\">\n",
              "    <form action=\"https://www.google.com/search\" method=\"get\" target=\"_blank\" onsubmit=\"addOpossum()\">\n",
              "    <input type=\"text\" id=\"searchQuery\" name=\"q\">\n",
              "    <br>\n",
              "    <button type=\"submit\">Opossum Search</button>\n",
              "    </form>\n",
              "    </div>\n",
              "    <footer>Powered by Opossum Search</footer>\n",
              "    <script>\n",
              "    function addOpossum() {\n",
              "    var query = document.getElementById(\"searchQuery\").value;\n",
              "    document.getElementById(\"searchQuery\").value = \"opossum \" + query;\n",
              "    }\n",
              "    </script>\n",
              "    </body>\n",
              "    </html>\n",
              "```\n",
              "\n",
              "Key points:\n",
              "\n",
              "*   **Form Submission**: The form now correctly redirects to a Google search.\n",
              "*   **JavaScript Function**: A JavaScript function `addOpossum()` is used to prepend \"opossum\" to the search query before submitting to Google.\n",
              "*   **Styling**: It includes styling to make it look similar to the Google search page.\n",
              "*   **Opossum Image**:  It uses the provided opossum image URL.\n",
              "*   **Footer**: Includes the \"Powered by Opossum Search\" footer.\n",
              "*   **Single HTML File**: It's contained within a single HTML file.\n",
              "*   **No Unicode**: Uses standard HTML and avoids special characters.\n",
              "*   **Visual Similarity**: Includes basic styling to resemble the Google search interface.\n",
              "*   **Target Blank**: Opens the search result in a new tab."
            ],
            "text/plain": [
              "<IPython.core.display.Markdown object>"
            ]
          },
          "metadata": {},
          "output_type": "display_data"
        }
      ],
      "source": [
        "response = client.models.generate_content(\n",
        "    model=MODEL_ID,\n",
        "    contents=prompt,\n",
        "    config=GenerateContentConfig(\n",
        "        system_instruction=instruction\n",
        "    )\n",
        ")\n",
        "display(Markdown(response.text))"
      ]
    },
    {
      "cell_type": "markdown",
      "metadata": {
        "id": "Im4fvOK5S3-A"
      },
      "source": [
        "## Run the output locally\n",
        "\n",
        "You can start a web server as follows.\n",
        "\n",
        "* Save the HTML output to a file called `search.html`\n",
        "* In your terminal run `python3 -m http.server 8000`\n",
        "* Open your web browser, and point it to `http://localhost:8000/search.html`"
      ]
    },
    {
      "cell_type": "markdown",
      "metadata": {
        "id": "_wcKnJKIuBQg"
      },
      "source": [
        "## Display the output in IPython\n",
        "\n",
        "Like all LLMs, the output may not always be correct. You can experiment by rerunning the prompt, or by writing an improved one (and/or better system instructions). Have fun!"
      ]
    },
    {
      "cell_type": "code",
      "execution_count": 8,
      "metadata": {
        "id": "M6FS75_bi5kP"
      },
      "outputs": [
        {
          "data": {
            "text/html": [
              "\n",
              "    <!DOCTYPE html>\n",
              "    <html>\n",
              "    <head>\n",
              "    <title>Opossum Search</title>\n",
              "    <style>\n",
              "    body {\n",
              "    font-family: Arial, sans-serif;\n",
              "    margin: 0;\n",
              "    display: flex;\n",
              "    flex-direction: column;\n",
              "    align-items: center;\n",
              "    height: 100vh;\n",
              "    }\n",
              "    .container {\n",
              "    text-align: center;\n",
              "    margin-top: 10vh;\n",
              "    }\n",
              "    img {\n",
              "    width: 200px;\n",
              "    margin-bottom: 20px;\n",
              "    }\n",
              "    input[type=text] {\n",
              "    padding: 10px 20px;\n",
              "    width: 500px;\n",
              "    border: 1px solid #ccc;\n",
              "    border-radius: 24px;\n",
              "    font-size: 16px;\n",
              "    }\n",
              "    button {\n",
              "    padding: 10px 20px;\n",
              "    background-color: #f8f9fa;\n",
              "    border: 1px solid #f0f0f1;\n",
              "    color: #3c4043;\n",
              "    border-radius: 4px;\n",
              "    cursor: pointer;\n",
              "    margin: 5px;\n",
              "    }\n",
              "    button:hover {\n",
              "    border: 1px solid #ccc;\n",
              "    }\n",
              "    footer {\n",
              "    margin-top: auto;\n",
              "    text-align: center;\n",
              "    padding: 20px;\n",
              "    font-size: small;\n",
              "    color: #70757a;\n",
              "    }\n",
              "    </style>\n",
              "    </head>\n",
              "    <body>\n",
              "    <div class=\"container\">\n",
              "    <img src=\"https://upload.wikimedia.org/wikipedia/commons/thumb/2/27/Opossum_2.jpg/292px-Opossum_2.jpg\" alt=\"Opossum Logo\">\n",
              "    <form action=\"https://www.google.com/search\" method=\"get\" target=\"_blank\" onsubmit=\"addOpossum()\">\n",
              "    <input type=\"text\" id=\"searchQuery\" name=\"q\">\n",
              "    <br>\n",
              "    <button type=\"submit\">Opossum Search</button>\n",
              "    </form>\n",
              "    </div>\n",
              "    <footer>Powered by Opossum Search</footer>\n",
              "    <script>\n",
              "    function addOpossum() {\n",
              "    var query = document.getElementById(\"searchQuery\").value;\n",
              "    document.getElementById(\"searchQuery\").value = \"opossum \" + query;\n",
              "    }\n",
              "    </script>\n",
              "    </body>\n",
              "    </html>\n"
            ],
            "text/plain": [
              "<IPython.core.display.HTML object>"
            ]
          },
          "execution_count": 8,
          "metadata": {},
          "output_type": "execute_result"
        }
      ],
      "source": [
        "import IPython\n",
        "code = response.text.split('```')[1][len('html'):]\n",
        "IPython.display.HTML(code)"
      ]
    }
  ],
  "metadata": {
    "colab": {
      "name": "Opossum_search.ipynb",
      "toc_visible": true
    },
    "kernelspec": {
      "display_name": "Python 3",
      "name": "python3"
    }
  },
  "nbformat": 4,
  "nbformat_minor": 0
}
